<div *ngIf="!_isLoaded"
    class="loading">
    <mat-spinner></mat-spinner>
</div>

<div *ngIf="isError"
    class="error">
    <mat-icon>error</mat-icon>
    <div>The corrupted reports have been received from an API server. Please check your HEP.</div>
</div>
<mat-tab-group [style.height.%]='100'>
    <mat-tab label="RTP" *ngIf="isRTP && !isError" style="height: 100%;" >
        <div class='tab' #containerRTP>
            <!-- RTP -->
            <div class="responsive" 
            [style.min-height.px]='250'>
                <div [style.min-width.%]="chartWidthRTP"
                    [style.height.px]="chartHeightRTP"
                    [style.min-height.px]='250'
                    style="overflow-x: auto;">
        
                    <div class="chart-container">
                        <canvas *ngIf="!isNoDataRTP"
                            matTooltip="Use mouse wheel for resize the chart"
                            baseChart
                            (wheel)="onWheelRTP($event)"
                            #chartRTP='base-chart'
                            [datasets]="chartDataRTP"
                            [labels]="chartLabelsRTP"
                            [options]="chartOptions"
                            [legend]="chartLegend"
                            [chartType]="chartType">
                        </canvas>
                        <div *ngIf="isNoDataRTP"
                            class="nodata">
                            <div [ngStyle]="{'backgroundColor':color}"
                                class='nodata-card'>
                                <div class='text-container'>
                                    <h1>No Data shown</h1>
                                    <p>Please select datastreams to display chart</p>
                                </div>
                            </div>
                        </div>
        
                    </div>
                </div>
        
        
            </div>
            <div class="responsive" #flagsRTP>
                <button class="hide-button rotate90deg"
                    (click)="hideLabelsFlagRTP = !hideLabelsFlagRTP">{{ hideLabelsFlagRTP ? 'show' : 'hide' }}
                    labels</button>
                <div *ngIf="!hideLabelsFlagRTP"
                    class="item-container">
                    <div [className]="'item ' + item.color"
                        *ngFor="let item of listRTP">
                        <div class="text">{{ item.name | uppercase }}</div>
                        <div class="text-badge">{{ item.value }}</div>
                    </div>
                </div>
                <mat-card *ngFor="let item of streamsRTP"
                    class="cardStream">
                    <mat-checkbox [(ngModel)]="item._checked"
                        [(indeterminate)]="item._indeterminate"
                        (change)="onChangeCheckBoxRTP(item, null, true)">
                        <div style="display: flex; align-items: center; align-content: center;">
                            <span>{{ aliases[item.srcIp + ":" + item.srcPort] !== undefined ? aliases[item.srcIp + ":" + item.srcPort] : item.srcIp }}</span>
                            <mat-icon>trending_flat</mat-icon>
                            <span>{{ aliases[item.dstIp + ":" + item.dstPort] !== undefined ? aliases[item.dstIp + ":" + item.dstPort] : item.dstIp }}</span>
                        </div>
                    </mat-checkbox>
                    <div style="padding-left: 2rem; display: flex; flex-direction: column;">
                        <mat-checkbox (change)="onChangeCheckBoxRTP(item,'TOTAL_PK')"
                            [(ngModel)]="item.TOTAL_PK">
                            <span class="color-bubble"
                                [style.background-color]="item.TOTAL_PK_color"></span>
                            TOTAL_PK
                        </mat-checkbox>
                        <mat-checkbox (change)="onChangeCheckBoxRTP(item,'EXPECTED_PK')"
                            [(ngModel)]="item.EXPECTED_PK">
                            <span class="color-bubble"
                                [style.background-color]="item.EXPECTED_PK_color"></span>
                            EXPECTED_PK
                        </mat-checkbox>
                        <mat-checkbox (change)="onChangeCheckBoxRTP(item,'JITTER')"
                            [(ngModel)]="item.JITTER">
                            <span class="color-bubble"
                                [style.background-color]="item.JITTER_color"></span>
                            JITTER
                        </mat-checkbox>
                        <mat-checkbox (change)="onChangeCheckBoxRTP(item,'MOS')"
                            [(ngModel)]="item.MOS">
                            <span class="color-bubble"
                                [style.background-color]="item.MOS_color"></span>
                            MOS
                        </mat-checkbox>
                        <mat-checkbox (change)="onChangeCheckBoxRTP(item,'DELTA')"
                            [(ngModel)]="item.DELTA">
                            <span class="color-bubble"
                                [style.background-color]="item.DELTA_color"></span>
                            DELTA
                        </mat-checkbox>
                        <mat-checkbox (change)="onChangeCheckBoxRTP(item,'PACKET_LOSS')"
                            [(ngModel)]="item.PACKET_LOSS">
                            <span class="color-bubble"
                                [style.background-color]="item.PACKET_LOSS_color"></span>
                            PACKET_LOSS
                        </mat-checkbox>
                    </div>
                </mat-card>
            </div>
        </div>
    </mat-tab>
    <mat-tab label="RTCP" *ngIf="isRTCP && !isError" style="height: 100%;"  >
        <div class='tab'#containerRTCP>
            <!-- RTCP -->
            <div class="responsive" 
            [style.min-height.px]='250'>
                <div [style.min-width.%]="chartWidthRTCP"
                [style.height.px]="chartHeightRTCP"
                [style.min-height.px]='250'
                    style="overflow-x: auto;">
                    <div class="chart-container">
                        <canvas *ngIf="!isNoDataRTCP"
                            baseChart
                            matTooltip="Use mouse wheel for resize the chart"
                            (wheel)="onWheelRTCP($event)"
                            #chartRTCP='base-chart'
                            [datasets]="chartDataRTCP"
                            [labels]="chartLabelsRTCP"
                            [options]="chartOptions"
                            [legend]="chartLegend"
                            [chartType]="chartType">
                        </canvas>
                        <div *ngIf="isNoDataRTCP"
                            class="nodata">
                            <div [ngStyle]="{'backgroundColor':color}"
                                class='nodata-card'>
                                <div class='text-container'>
                                    <h1>No Data shown</h1>
                                    <p>Please select datastreams to display chart</p>
                                </div>
                            </div>
                        </div>
        
                    </div>
                </div>
        
        
            </div>
            <div class="responsive" #flagsRTCP>
                <button class="hide-button rotate90deg"
                    (click)="hideLabelsFlag = !hideLabelsFlag">{{ hideLabelsFlag ? 'show' : 'hide' }} labels</button>
                <div *ngIf="!hideLabelsFlag"
                    class="item-container">
                    <div [className]="'item ' + item.color"
                        *ngFor="let item of listRTCP">
                        <div class="text">{{ item.name | uppercase }}</div>
                        <div class="text-badge">{{ item.value }}</div>
                    </div>
                </div>
        
                <mat-card *ngFor="let item of streamsRTCP"
                    class="cardStream">
                    <mat-checkbox [(ngModel)]="item._checked"
                        [(indeterminate)]="item._indeterminate"
                        (change)="onChangeCheckBoxRTCP(item, null, true)">
                        <div style="display: flex; align-items: center; align-content: center;">
                            <span>{{ aliases[item.srcIp + ":" + item.srcPort] !== undefined ? aliases[item.srcIp + ":" + item.srcPort] : item.srcIp }}</span>
                            <mat-icon>trending_flat</mat-icon>
                            {{test(item)}}
                            <span>{{ aliases[item.dstIp + ":" + item.dstPort] !== undefined ? aliases[item.dstIp + ":" + item.dstPort] : item.dstIp }}</span>
                        </div>
                    </mat-checkbox>
                    <div style="padding-left: 2rem; display: flex; flex-direction: column;">
                        <mat-checkbox (change)="onChangeCheckBoxRTCP(item, 'packets')"
                            [(ngModel)]="item.packets">
                            <span class="color-bubble"
                                [style.background-color]="item.packets_color"></span>
                            packets
                        </mat-checkbox>
                        <mat-checkbox (change)="onChangeCheckBoxRTCP(item, 'octets')"
                            [(ngModel)]="item.octets">
                            <span class="color-bubble"
                                [style.background-color]="item.octets_color"></span>
                            octets
                        </mat-checkbox>
                        <mat-checkbox (change)="onChangeCheckBoxRTCP(item, 'highest_seq_no')"
                            [(ngModel)]="item.highest_seq_no">
                            <span class="color-bubble"
                                [style.background-color]="item.highest_seq_no_color"></span>
                            highest_seq_no
                        </mat-checkbox>
                        <mat-checkbox (change)="onChangeCheckBoxRTCP(item, 'mos')"
                            [(ngModel)]="item.mos">
                            <span class="color-bubble"
                                [style.background-color]="item.mos_color"></span>
                            mos
                        </mat-checkbox>
                        <mat-checkbox (change)="onChangeCheckBoxRTCP(item, 'ia_jitter')"
                            [(ngModel)]="item.ia_jitter">
                            <span class="color-bubble"
                                [style.background-color]="item.ia_jitter_color"></span>
                            ia_jitter
                        </mat-checkbox>
                        <mat-checkbox (change)="onChangeCheckBoxRTCP(item, 'lsr')"
                            [(ngModel)]="item.lsr">
                            <span class="color-bubble"
                                [style.background-color]="item.lsr_color"></span>
                            lsr
                        </mat-checkbox>
                        <mat-checkbox (change)="onChangeCheckBoxRTCP(item, 'packets_lost')"
                            [(ngModel)]="item.packets_lost">
                            <span class="color-bubble"
                                [style.background-color]="item.packets_lost_color"></span>
                            packets_lost
                        </mat-checkbox>
                        <mat-checkbox (change)="onChangeCheckBoxRTCP(item, 'fraction_lost')"
                            [(ngModel)]="item.fraction_lost">
                            <span class="color-bubble"
                                [style.background-color]="item.fraction_lost_color"></span>
                            fraction_lost
                        </mat-checkbox>
                    </div>
                </mat-card>
            </div>
        </div>
    </mat-tab>
</mat-tab-group>